@use 'src/styles/abstracts' as *;

.SplitPane {
  display: flex;
  width: 100%;
  height: 100%;
  .gutter {
    transition: all 0.15s ease-out 0.2s;
    background-color: white;
  }
  &.horizontal {
    flex-direction: row;
    .gutter-horizontal {
      cursor: col-resize;
      box-shadow: inset 2px 0 0 0 $primary-color-20;
      &:hover, &:active {
        background-color: $primary-color-50;
        box-shadow: unset;
      }
    }
    .SplitPaneItem {
      overflow-x: auto;
    }
  }
  &.vertical {
    flex-direction: column;
    .gutter-vertical {
      cursor: row-resize;
      box-shadow: inset 0 2px 0 0 $primary-color-20;
      &:hover, &:active {
        background-color: $primary-color-50;
        box-shadow: unset;
      }
    }
    .SplitPaneItem {
      overflow-y: auto;
    }
  }
  &.hide {
    visibility: hidden;
  }
}
